<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 500px;
                height: 500px;
                display: flex;
                justify-content: flex-start;
                overflow-x: auto;
                border: 1px solid blue;
            }
            p{
                width: 100px;
                height: 100px;
                box-sizing: border-box;
                flex-shrink: 0;
            }
            p:nth-child(1){
                background: palegreen;
            }
            p:nth-child(2){
                background: #2e795b;
            }
            p:nth-child(3){
                background: #8c54c4;
            }
            p:nth-child(4){
                background: #a88744;
            }
            p:nth-child(5){
                background: #6aba1a;
            }
            p:nth-child(6){
                background: #af2b57;
            }
        </style>
    </head>
    <body>
        <div>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </body>
</html>